<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
        integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<style type="text/css">
    input {
        height: 38px;
        width: 200px;
    }

    .pdfcontent {
        margin: auto;
        position: relative;
        width: 793px;
    }

    .content {}

    ._2rhmJa {
        font-weight: 400;
        line-height: 1.8;
        margin-bottom: 20px;
        word-break: break-word;
        position: relative;
    }

    .pdfSeal {
        position: absolute;
        bottom: 25px;
        right: 20%;
    }
</style>

<body>
    <img src="" alt="" />
    <!-- 图片要保存在电脑里才能转换成png ， 如果要传给后台base64 ,则在 toDataURL().substring(22) -->
    <div>
        <input type="text" name="" placeholder="请输入单位名称 字数不超过15个" id="sealinstitution" value="广州市电脑计算机科技有限公司" />
        <input type="text" name="" placeholder="请输入备注内容 字数不超过5个" id="sealremark" maxlength="5" value="系统专用章" />
        <button class="productseal">生成公章</button>
        <button class="getseal">生成图片</button>
    </div>

    <div id="element-to-print" class="pdfcontent">
        <canvas id="canvas" width="250" height="250" class="pdfSeal"></canvas>
        <div class="content">
            <article class="_2rhmJa">
                <p>正文</p>
                <p>出嫁四月，我的夫君带回他的心头好白月光。将她抬为平妻，从此与我平起平坐。</p>
                <p>我强忍心痛转移注意力，最后偶然发现，太子的幕僚，长得竟和我的意中人有七八分相像。</p>
                <p>我知道我不该荒唐妄想，可这张脸，已是我余生仅有的慰藉。</p>
                <p>十七岁时，我出嫁，羡煞一众京都贵女。</p>
                <p>因为我的夫君是这个世界上顶顶尊贵的人之一——东宫太子，萧其泽。</p>
                <p>可是，这场婚事，无关情爱，也无关我。</p>
                <p>他心中有必须割舍的白月光，我也藏着为我捞月的意中人。</p>
                <p>婚礼前夜，我坐到天明，彻夜未眠。</p>
                <p>我想了很多，从父母兄长到楚暄，再到无边的草原美景，那些我回不去的曾经。</p>
                <p>我的妄想。</p>
                <p>我有喜欢的人，可是我永远都见不到他了。</p>
                <p>永远。</p>
                <p>他与我父兄，葬在同一片沙场。</p>
                <p>他临走前答应我，要回来十里红妆迎我。</p>
                <p>我那时羞涩，未曾应许。</p>
                <p>现在我后悔了，我应该堂堂正正地答应他。</p>
                <p>等我的少年将军战胜归来，等他过来带我走。</p>
                <p>我不想要十里红妆，我只想要他回来。</p>
                <p>而宫里规矩多，作为郡主，更是要谨言慎行，不得行差踏错半分。</p>
                <p>我如此身份，一旦踏错一步，便是万丈深渊。</p>
                <p>因而我只得在夜深人静时，悄悄为他落两滴泪。</p>
                <p>再没有多余。</p>
                <p>此后物是人非，也不能再有。</p>
                <p>北夷来犯，常年驻扎于此的陆家，是守城的主力军。</p>
                <p>那一场战役，分外惨烈。</p>
                <p>我一夕之间失去了所有。</p>
                <p>母亲大恸，我随她一起料理后事，也是夜夜垂泪。她身体本就不好，没过多久也去了。</p>
                <p>我终于成了孤家寡人。</p>
                <p>皇帝恩宠，接我入京，养在太后膝下，加封我为永嘉郡主，风光无限。</p>
                <p>我失去了我的名字，从此永嘉便成为我的名字。</p>
                <p>可是我永远也不会忘记，我是陆家人，我叫陆昕，我不是永嘉。</p>
                <p>北境才是我的家。</p>
                <p>我作为战士遗孤，太后对我其实还不错，只是没有用真心。</p>
                <p>不过在宫廷中，又有几分真心。我自嘲地想。</p>
                <p>自此我长居宫廷之中，日日谨言慎行，如履薄冰。</p>
                <p>我刻意改变自己去适应皇宫，太后的荣宠不过表面，她并不愿意在我身上多花时间，不过我仍是日日前去慈宁宫拜访，表面工夫做的极好。</p>
                <p>渐渐的，因我嘴甜，她也愿意给我分一份关注。</p>
                <p>但比不上义安。</p>
                <p>春日宴席过半，我借口身体不适溜出大殿，因着先前义安的教训，不敢再乱走，生怕又撞上什么。</p>
                <p>我先前无意间撞上义安公主私会外男，从此她便对我恶语相向。</p>
                <p>她生来骄矜尊贵，人脉极广，对付我是轻而易举的事。</p>
                <p>此番我本想抄小路回永嘉宫，却无意寻到一处僻静之地，冷清的宫殿荒草丛生，唯小院中一架陈旧的秋千稍添生气。</p>
                <p>我望着那个秋千，一时走了神。</p>
                <p>阿爹曾在我的小院中为我搭了一个秋千，旁边栽了一棵木樨，秋日里送来桂香，十分宜人。</p>
                <p>我本该很快离开。</p>
                <p>却在那里看到了一个人。</p>
                <p>东宫太子，萧其泽。</p>
                <p>他并非皇后所出，却是长子，皇后也无嫡子，早年皇帝只他一个儿子。</p>
                <p>他亦龙章凤姿、文武功夫皆非凡，于是顺理成章地成为东宫。</p>
                <p>他的母妃身份低微，早早就去了，他年岁尚小，于是被抱到皇后膝下。</p>
                <p>那夜他没有穿我宴席上看见的独属太子的四爪蟒袍，而是换了一身黑色便装，险些融在夜色之中。</p>
                <p>他神情悲寂孤冷，拿着一屉纸钱，丢在火堆之中。</p>
                <p>我心道不好，他需要偷偷做的事，若是被我撞见，我可吃不了兜着走。</p>
                <p>于是转身欲走。</p>
                <p>然后直直碰上了他的胸膛。</p>
                <p>他冷着脸，不是他一贯的温和面容，在低垂的夜幕之中，显得有些瘆人。</p>
                <p>我其实有些怂他。</p>
                <p>顾不上鼻子疼痛，我俯首作揖，强自镇定：“臣女参见太子殿下。”</p>
                <p>我感觉到他的目光落在我身上，很快这种感觉又消失不见。</p>
                <p>他问：“你可曾见到什么？”</p>
                <p>我垂眸道：“没有。臣女偶感不适，借此路将归永嘉宫。”</p>
                <p>其实我心里明白，他定然不会相信我。</p>
                <p>他这样的人，本就该是大权在握，宁可错杀一千，不能放过一个。</p>
                <p>我就是那一个。</p>
                <p>他铁血手腕，不计手段。</p>
                <p>表面温文尔雅，其实心计颇深，不可小觑。</p>
                <p>那夜过后，我愈加谨慎，担心萧其泽对我动手。</p>
                <p>果然，那日后，我的饭菜里常有毒。</p>
                <p>好在我母亲擅医，我自幼通些医理，堪堪避过。</p>
                <p>他没能毒死我。</p>
                <p>随后风平浪静了一段时间，就传开了太子求娶我的消息。</p>
                <p>我诧异，随即了然。</p>
                <p>我身份敏感，他毒杀我不成，又不能明目张胆刺杀我，便将我控制在后宅，囚于东宫，让我不能乱说。</p>
                <p>介时他得登大统，再将我贬入冷宫，便眼不见心不烦。</p>
                <p>我一生蹉跎，他前路平坦。</p>
                <p>真是……极好的计谋。</p>
                <p>如果被算计的人不是我的话，也许我会敬佩他这一番算计。</p>
                <p>对于太子的求娶，我日夜难安，不知如何应对。</p>
                <p>太后召见我前去问话，问我的意见。</p>
                <p>我知道她只是表面询问我，其实根本不会给我同意的机会。</p>
                <p>我的意见，又有什么要紧。</p>
                <p>太子胡闹，我可不能。</p>
                <p>我恭敬地说：“臣女微贱，不敢高攀。”</p>
                <p>太后很满意，随后又担忧道：“不过你年岁不小，确实该说亲了。”</p>
                <p>我在心里说，我才十七。</p>
                <p>京都的贵女出嫁都早，可我生在边境，这里的女子出嫁都晚。</p>
                <p>身边是无边草原美景，我在这里肆意挥鞭，豪情无限。</p>
                <p>快活得很。</p>
                <p>可是在京都，我不可以骑马，因为京都的贵女都不会学习骑术。</p>
                <p>而我的身份，也将之阻挡在外。</p>
                <p>我会武，却毫无用武之地。</p>
                <p>我于是发现了我的寂寞。</p>
                <p>很，寂寞啊。</p>
                <p>阿爹留下的影卫风召探了消息回来，关于太子往事。</p>
                <p>因皇帝不喜太子生母，此事诸多人避讳，都是一问三不说。</p>
                <p>风召颇费了些功夫，寻访了一些昔日宫人，终于查到些许。</p>
                <p>那间荒殿，是他母妃生前所住。</p>
                <p>原来那日，是他母妃的忌日。</p>
                <p>他去拜祭他的母妃，而宫廷之内，正宴饮欢乐。</p>
                <p>我忽然有些同情他，我们同是天涯沦落人。随即又感觉好笑，萧其泽那样的人，怎么会需要我的同情。</p>
                <p>我又凭什么同情他。</p>
                <p>过了几日，我正在梳妆时，宫人来报，太子内侍在外求见郡主。</p>
                <p>我的心情忽然很平静，从未有过的平静。</p>
                <p>既来之，则安之。</p>
                <p>我身无长物，即使他想要我的命，那么……也任凭他拿走吧。</p>
                <p>我又能如何。</p>
                <p>这里的生活，太寂寞了。</p>
                <p>我想念父母和兄长，想念楚暄，想念无边的草原。</p>
                <p>京都的风，京都的空气，都让我窒息。</p>
                <p>永嘉宫和东宫离的很近，我没叫轿撵，慢悠悠地过去，去等待一场审判。</p>
                <p>我见到了萧其泽。</p>
                <p>他转过身来看我，并不说话。</p>
                <p>我问：“殿下寻臣女，可有要事？”</p>
                <p>表面强作镇静，其实内心已经溃不成军。</p>
                <p>他笑了。</p>
                <p>萧其泽其实生的颇为好看，尤其他笑起来的时候，眉眼微勾，旖丽张扬，像一朵罂粟。</p>
                <p>他说：“永嘉，你是聪明人，有些事，不必孤多说。</p>
                <p>想必你已经查到了，皇后现今猜忌孤，我若娶高门贵女，必会引她反弹，于孤不利，你是最好的人选。”</p>
                <p>他本是独子，可近来后宫的淑妃正得圣宠，育有一子，虽年岁尚小，却也可以加以利用。他背后没有势力支撑，随时会成为弃子。</p>
                <p>可他为什么会选择我？</p>
                <p>我说：“臣女决定不了此事。”</p>
                <p>他说他会解决。</p>
                <p>我惴惴不安地离开了，闭上眼就是花烛成双，龙凤呈祥。</p>
                <p>不知怎的，太后与皇帝都同意了这门亲事，不得不说，萧其泽真是好手段。</p>
                <p>我的婚事自然不由我。</p>
                <p>我叹息着备嫁，在嫁衣上象征性地绣了云纹，也将我余生的孤寂绣在了里面。</p>
                <p>婚事仓促，却盛大。</p>
                <p>皇家威仪，自然不容亵渎，规格极高。</p>
                <p>两个月后，我正式入主东宫。</p>
                <p>婚后我们保持表面上的平静，至少我很庆幸他还没有妾室，我少了很多麻烦。</p>
                <p>不过义安公主最近找我的麻烦却更多了。</p>
                <p>本来她就不喜萧其泽，也不喜欢我，我们两个加起来，那就是双倍的厌憎。</p>
                <p>我也不喜欢她。</p>
                <p>不过我确实有些羡慕她。</p>
                <p>双亲健在，她身上的这份肆意与妄为，却是我再也无法重拾的。</p>
                <p>原来我曾经，也是一个肆意奔跑的少年，无拘无束，百无禁忌。</p>
                <p>成为太子妃后，我骤然忙碌了起来，每日忙着应酬和应对义安。</p>
                <p>直到他带回了傅莹。庶务都被交给了她，我又回到了曾经在永嘉宫的清闲日子。</p>
                <p>不用担心太子会不会又对我下毒，也不用担心傅莹会不会对我恶语相向。</p>
                <p>因为我远远地避开他们，当了一个隐形人。</p>
                <p>没有人在意我。</p>
            </article>
        </div>
    </div>



</body>
<script type="text/javascript">
    var element = document.getElementById('element-to-print');
    var opt = {
        margin: 12,
        filename: `22.pdf`,
        image: { type: 'jpeg', quality: 1 },
        html2canvas: { scale: 2, allowTaint: true },
        pagebreak: { mode: 'avoid-all', after: '.avoidThisRow' },    // 智能分页，防止图片被截断
        enableLinks: true  // 支持文本中放链接，可点击跳转
    };

    document.querySelector('.productseal').addEventListener("click", function () {
        var sealinstitution = document.getElementById('sealinstitution').value;
        var sealremark = document.getElementById('sealremark').value;
        createSeal('canvas', sealinstitution, sealremark);
        html2pdf(element, opt);
    })
    document.querySelector('.getseal').addEventListener("click", function () {
        document.getElementById('canvas').toDataURL("image/png");
        console.log(document.getElementById('canvas').toDataURL("image/png"));
        document.querySelector("img").src = document.getElementById('canvas').toDataURL("image/png");
    })

    var maxLength = 15;
    function createSeal(id, company, name) {

        var canvas = document.getElementById(id);
        var context = canvas.getContext('2d');

        // 绘制印章边框   
        var width = canvas.width / 2;
        var height = canvas.height / 2;
        context.lineWidth = 4;//边框宽度
        context.strokeStyle = "#f00";//边框颜色
        context.beginPath();
        context.arc(width, height, 110, 0, Math.PI * 2);
        context.stroke();

        //画五角星
        create5star(context, width, height, 30, "#f00", 0);

        // 绘制印章名称   
        context.font = '22px Helvetica';
        context.textBaseline = 'middle';//设置文本的垂直对齐方式
        context.textAlign = 'center'; //设置文本的水平对对齐方式
        context.lineWidth = 1;
        context.fillStyle = '#f00';
        context.fillText(name, width, height + 65);

        // 绘制印章单位   
        context.translate(width, height);// 平移到此位置,
        context.font = '26px Helvetica'//字号
        var count = company.length;// 字数   
        var angle = (4 * Math.PI / (3 * (maxLength - 1))) + 0.02;// 字间角度   字间距 +0.02~0.04
        var chars = company.split("");
        var c;
        for (var i = 0; i < count; i++) {
            c = chars[i];// 需要绘制的字符   
            if (i == 0)
                //context.rotate(5*Math.PI/6);
                context.rotate(3 * Math.PI / 2 - angle * (count - 1) / 2);//第一个字的位置
            else
                context.rotate(angle);
            context.save();
            context.translate(90, 0);// 平移到此位置,此时字和x轴垂直   
            context.rotate(Math.PI / 2);// 旋转90度,让字平行于x轴   
            context.fillText(c, 0, 5);// 此点为字的中心点   
            context.restore();
        }

        //绘制五角星  
        /** 
         * 创建一个五角星形状. 该五角星的中心坐标为(sx,sy),中心到顶点的距离为radius,rotate=0时一个顶点在对称轴上 
         * rotate:绕对称轴旋转rotate弧度 
         */
        function create5star(context, sx, sy, radius, color, rotato) {
            context.save();
            context.fillStyle = color;
            context.translate(sx, sy);//移动坐标原点  
            context.rotate(Math.PI + rotato);//旋转  
            context.beginPath();//创建路径  
            var x = Math.sin(0);
            var y = Math.cos(0);
            var dig = Math.PI / 5 * 4;
            for (var i = 0; i < 5; i++) {//画五角星的五条边  
                var x = Math.sin(i * dig);
                var y = Math.cos(i * dig);
                context.lineTo(x * radius, y * radius);
            }
            context.closePath();
            context.stroke();
            context.fill();
            context.restore();
        }
    }

</script>

</html>